/*1.需要对象：设置不同颜色（奇偶行，鼠标移入行）
  2.显示文字：记录选中的数字
  3.第一个复选框：全选反选
  4.每行的复选框：单个选中或取消
  5.删除功能*/

//获取元素对象
var body = document.getElementById('body');
//每一行
var trs = body.getElementsByTagName('tr');
//每行前面的复选框
var cb = body.getElementsByTagName('input');
//删除按钮
var del = document.getElementById('btnDeleted');
//全选/反选 复选框
var all = document.getElementById('all');
//最上面的一行字
var txt = document.getElementById('txt');

//1.自定义对象：设置不同颜色（奇偶行，鼠标移入行）
//该对象包含：3个属性分别设置3种颜色，1个方法：给传入的参数对象设置颜色
var RowsColor = {
	odd: "gray",
	even: "white",
	selected: "red",
	setColor: function(trs) {
     //循环操作每一行
      for(var i=0;i<trs.length;i++){    
      	//定义奇偶行原来的颜色
      	trs[i].originColor=(i%2==0?"white":"gray");
      	//设置奇偶行颜色
      	trs[i].style.background=trs[i].originColor;
      	//鼠标移入的颜色
      	trs[i].onmouseover=function(){
      		this.style.background="red";
      	};
      	//鼠标移出的颜色
      trs[i].onmouseleave=function(){
           this.style.background=this.originColor;
      }
     }
	}
};

function displayNumber(){
	//邮件总数
	var total=trs.length;
	//选中的邮件数目
	var count=0;
	//循环操作：复选框被选中 count++
	for(var i=0;i<trs.length;i++){
		if(cb[i].checked){
			count++;
		}
	}
	txt.innerHTML="一共"+total+"封邮件,你选中了"+count+"封邮件";
}
//3.第一个复选框：全选反选
function allSelect(){
	/*1.循环操作：根据全选复选框是否被选中来设置每一行前面的复选框
	  2.调用显示文字函数*/
	 for(var i=0;i<trs.length;i++){
	 	cb[i].checked=all.checked;
	 }
	displayNumber(); 
}
//5.删除功能：循环把选中的复选框所在的行删除
function deleteEvent(){
	for(var i=0;i<trs.length;i++){
		if(cb[i].checked){
		//删除选中的行：从父元素中删除子元素：parent.removeChild(child)
		 trs[i].parentElement.removeChild(trs[i]);
		 i--;
		}
	}
	displayNumber();
}

//设置每一行颜色（3种）
  RowsColor.setColor(trs);
 //显示文字函数；     
displayNumber();
//调用全选/反选函数
all.onclick=allSelect;
//4.每行的复选框：单个选中或取消，影响显示文字
for(var i=0;i<cb.length;i++){
	cb[i].onclick=function(){
		displayNumber();
	}
}
del.onclick=deleteEvent;